<form class="layui-form" id="larrymsThemes">
<div class="larryms-themeset-tit">系统主题设置</div>
<div class="larryms-themeset-body">
	<!-- 主题配色 -->
	<ul class="theme-scheme">
		<li class="larryms-this defaults" data-alias="defaults" title="系统默认主题">
			<div class="larryms-header-theme"></div>
			<div class="larryms-left-theme"></div>
			<div class="larryms-right-theme">
				<span>默认主题</span>
				<div class="larryms-footer-theme"></div>
			</div>
		</li>
		<li class="deepBlue" data-alias="deepBlue" title="深蓝主题">
            <div class="larryms-header-theme"></div>
			<div class="larryms-left-theme"></div>
			<div class="larryms-right-theme">
				<span>深蓝主题</span>
				<div class="larryms-footer-theme"></div>
			</div>
		</li>
		<li class="navy" data-alias="navy" title="藏青主题">
			<div class="larryms-header-theme"></div>
			<div class="larryms-left-theme"></div>
			<div class="larryms-right-theme">
				<span>藏青主题</span>
				<div class="larryms-footer-theme"></div>
			</div>
		</li>
		<li class="green" data-alias="green" title="墨绿主题">
            <div class="larryms-header-theme"></div>
			<div class="larryms-left-theme"></div>
			<div class="larryms-right-theme">
				<span>墨绿主题</span>
				<div class="larryms-footer-theme"></div>
			</div>
		</li>
		<li class="orange" data-alias="orange" title="橙色主题">
			<div class="larryms-header-theme"></div>
			<div class="larryms-left-theme"></div>
			<div class="larryms-right-theme">
				<span>橙色主题</span>
				<div class="larryms-footer-theme"></div>
			</div>
		</li>
		<li class="custom" data-alias="custom" title="自定义主题">
			<div class="custom-themeset">自定义系统主题配色</div>
		</li>
	</ul>
	<div class="custom-box">
		<div class="larry-inline-block">
            <input type="text" placeholder="顶部颜色" class="layui-input color-input" name="topColor" id="c_1">    
            <div class="larry-inline colorpicker" id="c1"></div>  
        </div>
        
        <div class="larry-inline-block">
            <input type="text" placeholder="顶部选中色" class="layui-input larry-input" name="topThis"  id="c_2">
            <div class="larry-inline colorpicker"  id="c2"></div>  
        </div>

        <div class="larry-inline-block">
            <input type="text" placeholder="顶部下边框" class="layui-input larry-input" name="topBottom" id="c_3"> 
            <div class="larry-inline colorpicker" id="c3"></div>  
        </div>

        <div class="larry-inline-block">
            <input type="text" placeholder="左侧颜色" class="layui-input larry-input" name="leftColor" id="c_4">  
            <div class="larry-inline colorpicker" id="c4"></div>  
        </div>

        <div class="larry-inline-block">
            <input type="text" placeholder="左侧有边框" class="layui-input larry-input" name="leftRight" id="c_5">  
            <div class="larry-inline colorpicker" id="c5"></div>  
        </div>

        <div class="larry-inline-block">
            <input type="text" placeholder="菜单选中颜色" class="layui-input larry-input" name="navThis" id="c_6">   
            <div class="larry-inline colorpicker" id="c6"></div>  
        </div>

        <div class="larry-inline-block">
            <input type="text" placeholder="Tab标题栏下边框" class="layui-input larry-input" name="titBottom" id="c_7">  
            <div class="larry-inline colorpicker" id="c7"></div>  
        </div>
		
        <div class="larry-inline-block">
            <input type="text" placeholder="页脚颜色" class="layui-input larry-input" name="footColor" id="c_8">
            <div class="larry-inline colorpicker" id="c8"></div>  
        </div>

        <div class="larry-inline-block">
            <input type="text" placeholder="页脚文字颜色" class="layui-input larry-input" name="footFont" id="c_9">
            <div class="larry-inline colorpicker" id="c9"></div>  
        </div>
		
	</div>
</div>
<div class="larryms-themeset-sys">
	<div class="larryms-themeset-tit">Tab选项卡相关设置</div>
    <div class="layui-form-item tab-session">
    	<label class="layui-form-label">开启Tab缓存</label>
    	<div class="layui-input-block">
    		<input type="checkbox" id="tabCache" lay-filter="tabSession" lay-skin="switch"  value="1">
    		<div class="layui-word-aux">将记录并保持当前状态</div>
    	</div>
    </div>
    <div class="layui-form-item">
    	<label class="layui-form-label">Tab切换刷新</label>
    	<div class="layui-input-block">
            <input type="checkbox" id="tabAutoRefresh" lay-filter="tabAutoRefresh" lay-skin="switch"  value="1">
            <div class="layui-word-aux">切换选项卡将自动刷新</div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">是否隐藏Tab</label>
        <div class="layui-input-block">
            <input type="checkbox" id="mobileTabSwitch" lay-filter="mobileTabSwitch" lay-skin="switch"  value="1">
            <div class="layui-word-aux">移动端有效(默认隐藏)</div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">Tab动画加载</label>
        <div class="layui-input-block">
            <input type="checkbox" id="pageAnim" lay-filter="pageAnim" lay-skin="switch"  value="1">
            <div class="layui-word-aux">Tab打开动画(默认开启)</div>
        </div>
    </div>
    <div class="larryms-themeset-tit">其他系统设置（布局）</div>
    <div class="layui-form-item tab-session">
        <label class="layui-form-label">菜单模式</label>
        <div class="layui-input-block">
            <input type="checkbox" id="topMenuSet" lay-filter="topMenuSet" lay-skin="switch"  value="1">
            <div class="layui-word-aux">顶部导航菜单默认开启</div>
        </div>
    </div>
    <div class="layui-form-item tab-session">
    	<label class="layui-form-label">开启页脚</label>
    	<div class="layui-input-block">
    		<input type="checkbox" id="footSet" lay-filter="footSet" lay-skin="switch"  value="1">
    	</div>
    </div>
    <div class="layui-form-item tab-session">
    	<label class="layui-form-label">开启全屏</label>
    	<div class="layui-input-block">
    		<input type="checkbox" id="fullScreen" lay-filter="fullScreen" lay-skin="switch"  value="1">
    		<div class="layui-word-aux">客户端将自动全屏</div>
    	</div>
    </div>

</div>
<div class="layui-btn larryms-setTheme" lay-submit lay-filter="larrymsThemeSet">保存主题并立即生效</div>
</form>
<script>
layui.use(['jquery','form','index','layer','colorpicker'],function(){
    var $= layui.jquery,
        form = layui.form,
        layer = layui.layer,
        index = layui.index,
        larryms = layui.larryms,
        colorpicker = layui.colorpicker;
    
    // 读取缓存配置
    var tName = layui.data('larryms').theme !== undefined ? layui.data('larryms').theme.name :'undefined' ,
        systemSet = layui.data('larryms').systemSet,
        topMenuSet =layui.data('larryms').topMenuSet,
        mobileTabSwitch = layui.data('larryms').mobileTabSwitch;  
    if(tName !== 'undefined'){
    	$('.theme-scheme li[data-alias='+tName+']').addClass('larryms-this').siblings().removeClass('larryms-this');
        if($('.theme-scheme li[data-alias="custom"]').hasClass('larryms-this')){
            $('.custom-box').show();
            var curThemes = layui.data('larryms').theme;
            for(attrN  in curThemes ){
                $('.custom-box input[name='+attrN+']').val(curThemes[attrN]);
            }
        }  
    }

    if(systemSet.tabCache){
          $('#tabCache').attr('checked', 'checked');
    }else{
    	 $('#tabCache').removeAttr("checked");
    }
    if(systemSet.tabRefresh){
         $('#tabAutoRefresh').attr('checked', 'checked');
    }else{
    	 $('#tabAutoRefresh').removeAttr("checked");
    }
    if(systemSet.footSet == 'on'){
    	$('#footSet').attr('checked', 'checked');
    }else{
    	$('#footSet').removeAttr("checked");
    }
    if(systemSet.fullScreen){
        $('#fullScreen').attr('checked', 'checked');
    }else{
    	$('#fullScreen').removeAttr("checked");
    }
    if(systemSet.pageAnim){
        $('#pageAnim').attr('checked', 'checked');
    }else{
        $('#pageAnim').removeAttr("checked");
    }
    //移动端tab选项卡显示控制
    if(mobileTabSwitch){
        $('#mobileTabSwitch').attr('checked', 'checked');
    }else{
        $('#mobileTabSwitch').removeAttr("checked");
    }
    //顶级菜单导航控制
    if(topMenuSet){
        $('#topMenuSet').attr('checked', 'checked');
    }else{
        $('#topMenuSet').removeAttr("checked");
    }
    form.render();
    //设置主题配色
    $('.theme-scheme li').on('click',function(){
        $(this).addClass('larryms-this').siblings().removeClass('larryms-this');
        var themeName = $(this).data('alias');
        if(themeName!=='custom'){
        	$('.custom-box').hide();
        	if(themeName !=='defaults'){
                index.theme(index.themeColor[themeName]);
        	}else{
                index.theme({
                	name:'defaults',
                });
        	}
        }else{
        	$('.custom-box').show();
        }
        
    });
    //自定义主题配色
    
    colorpicker.render({
                elem: '#c1',
                color: '#1B8FE6',
                format: 'rgb',
                alpha: true,
                predefine: true,
                done: function(color) {
                    $('#c_1').val(color);
                    $('#c_1').blur();
                }
    });
    colorpicker.render({
                elem: '#c2',
                color: '#1958A6',
                format: 'rgb',
                alpha: true,
                predefine: true,
                done: function(color) {
                    $('#c_2').val(color);
                    $('#c_2').blur();
                }
    });
    colorpicker.render({
                elem: '#c3',
                color: '#01AAED',
                format: 'rgb',
                alpha: true,
                predefine: true,
                done: function(color) {
                    $('#c_3').val(color);
                    $('#c_3').blur();
                }
    });
    colorpicker.render({
                elem: '#c4',
                color: '#2F3A4F',
                format: 'rgb',
                alpha: true,
                predefine: true,
                done: function(color) {
                    $('#c_4').val(color);
                    $('#c_4').blur();
                }
    });
    colorpicker.render({
                elem: '#c5',
                color: '#1492DD',
                format: 'rgb',
                alpha: true,
                predefine: true,
                done: function(color) {
                    $('#c_5').val(color);
                    $('#c_5').blur();
                }
    });
    colorpicker.render({
                elem: '#c6',
                color: '#212837',
                format: 'rgb',
                alpha: true,
                predefine: true,
                done: function(color) {
                    $('#c_6').val(color);
                    $('#c_6').blur();
                }
    });
    colorpicker.render({
                elem: '#c7',
                color: '#1492DD',
                format: 'rgb',
                alpha: true,
                predefine: true,
                done: function(color) {
                    $('#c_7').val(color);
                    $('#c_7').blur();
                }
    });
    colorpicker.render({
                elem: '#c8',
                color: 'rgba(36,92,135,1)',
                format: 'rgb',
                alpha: true,
                predefine: true,
                done: function(color) {
                    $('#c_8').val(color);
                    $('#c_8').blur();
                }
    });
    colorpicker.render({
                elem: '#c9',
                color: '#FFC223',
                format: 'rgb',
                alpha: true,
                predefine: true,
                done: function(color) {
                    $('#c_9').val(color);
                    $('#c_9').blur();
                }
    });
    $('.custom-box input').blur(function(){
          var colorStr = $(this).val();
          if(larryms.CheckIsColor(colorStr) == 'hex'){
               setCustomTheme($(this).attr('name'),colorStr);
          }else{
                setCustomTheme($(this).attr('name'),colorStr);
                layer.tips('您正在设置'+$(this).attr('placeholder'), $(this), {
                    tips: [1, '#2CA1F7']
                });                
          }
    });
    $('.custom-box input').focus(function(){
         $(this).val('');
    });
    function setCustomTheme(attrName,curValue){
        var localValue = layui.data('larryms').theme;
        if(localValue !== undefined){
            localValue.name = 'custom';
            localValue[attrName] = curValue;
            index.theme(localValue);
        }else{
            var options = {name:'custom'};
            options[attrName] = curValue;
            index.theme(options);
        }
    }
    // 系统其他功能项设置
    form.on('switch(tabSession)', function(data) {
         setCurData('tabCache',data.elem.checked);
         return false;
	});
    
    form.on('switch(tabAutoRefresh)', function(data) {
         setCurData('tabRefresh',data.elem.checked);
         return false;
	});
    form.on('switch(footSet)', function(data) {
         var val = data.elem.checked === true ? 'on' : 'off';
         setCurData('footSet',val);
         index.footInit(val);
         return false;
	});
    form.on('switch(fullScreen)',function(data){
         var val = data.elem.checked === true ? true : false;
         setCurData('fullScreen',val);
         index.fScreen(val);
         return false;
    });
    form.on('switch(pageAnim)', function(data) {
         var val = data.elem.checked === true ? true : false;
         setCurData('pageAnim',val);
         index.pageAnimInit();
         return false;
    });
    //移动端tab选项卡配置
    form.on('switch(mobileTabSwitch)',function(data){
         var val = data.elem.checked === true ? true : false;
         layui.data('larryms',{
            key:'mobileTabSwitch',
            value: val
         });
         index.mobileTab();
         return false;
    });
    //顶部顶级导航开启配置
    form.on('switch(topMenuSet)',function(data){
         var val = data.elem.checked === true ? true : false;
         layui.data('larryms',{
            key:'topMenuSet',
            value: val
         });
         index.menuInit();
         return false;
    });
    function setCurData(name,data){
         var curData = layui.data('larryms').systemSet;
             curData[name] = data;
         layui.data('larryms',{
         	key:'systemSet',
         	value: curData
         });
    }
    form.on('submit(larrymsThemeSet)',function(){
        index.init();
        top.larryTab.render();
        layer.close(layer.index);
        return false;
    });
   
    
});
</script>
